<template>
  <svg>

    <rect width="300"
          height="100"
          style="fill:rgba(0,0,255,0.5);stroke-width:5;
stroke:rgba(0,0,0,0.7)" />
  </svg>
  <svg>
    <rect x="20"
          y="20"
          rx="50"
          ry="20"
          width="250"
          height="100"
          style="fill:red;stroke:black;
stroke-width:5;opacity:0.5" />
  </svg>
  <svg width="100%"
       height="100%"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg">

    <circle cx="100"
            cy="50"
            r="40"
            stroke="black"
            stroke-width="2"
            fill="red" />

  </svg>
  <svg width="100%"
       height="100%">
    <ellipse cx="210"
             cy="45"
             rx="170"
             ry="30"
             style="fill:red" />

  </svg>
  <svg width="100%"
       height="100%">
    <line x1="10"
          y1="20"
          x2="50"
          y2="80"
          style="stroke:rgb(99,99,99);stroke-width:2" />

  </svg>
  <svg width="100%"
       height="100%">
    <polygon points="10,50 80,60 170,100"
             style="fill:#cccccc;
stroke:#000000;stroke-width:1" />

  </svg>
  <svg width="100%"
       height="100%">
    <polygon points="220,100 300,210 170,250"
             style="fill:#cccccc;
stroke:#000000;stroke-width:1" />

  </svg>
  <svg width="100%"
       height="100%">
    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
              style="fill:white;stroke:red;stroke-width:2" />

  </svg>

  <svg width="100%"
       height="400"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg">

    <path d="M250 150 L150 350 L350 350 Z" />

  </svg>
  <svg width="100%"
       height="400"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg">

    <path id="svg_1"
          d="m99.0075,115.14086l57.00001,-52l57.00001,52l-57.00001,52l-57.00001,-52z"
          stroke-width="1.5"
          stroke="#000"
          fill="#306856" />
    <ellipse ry="49"
             rx="55.5"
             id="svg_2"
             cy="128.45313"
             cx="378"
             stroke-width="1.5"
             stroke="#000"
             fill="#FFAAB8" />
    <text xml:space="preserve"
          text-anchor="start"
          font-family="Helvetica, Arial, sans-serif"
          font-size="24"
          id="svg_3"
          y="257.45313"
          x="199.5"
          stroke-width="0"
          stroke="#000"
          fill="#000000">这是svg在线编辑器</text>

  </svg>
  <!-- 滤镜 -->
  <svg width="100%"
       height="400"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg">
    <!-- <defs> -->
    <filter id="Gaussian_Blur2">
      <feGaussianBlur in="SourceGraphic"
                      stdDeviation="3" />
    </filter>
    <!-- </defs> -->
    <ellipse cx="200"
             cy="150"
             rx="70"
             ry="40"
             style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur2)" />
  </svg>
  <svg width="400"
       height="400">
    <defs>
      <linearGradient id="rect1"
                      x1="0%"
                      y1="0%"
                      x2="100%"
                      y2="0%">
        <stop offset="0%"
              style="stop-color: blue;"></stop>
        <stop offset="20%"
              style="stop-color: pink;"></stop>
        <stop offset="40%"
              style="stop-color: Orange;"></stop>
        <stop offset="80%"
              style="stop-color: red;"></stop>
      </linearGradient>
    </defs>
    <rect x="50"
          y="50"
          width="200"
          height="200"
          style="fill:url(#rect1)"></rect>
  </svg>
  <svg width="400"
       height="400">
    <defs>
      <radialGradient id="radia1"
                      cx="50%"
                      cy="50%"
                      r="80%"
                      fx="30%" fy="30%">
        <stop offset="0%"
              style="stop-color:rgb(200,200,200);
stop-opacity:0" />
        <stop offset="100%"
              style="stop-color:rgb(0,0,255);
stop-opacity:1" />
      </radialGradient>

    </defs>
    <circle cx="200"
            cy="200"
            r="100"
            style="fill: url(#radia1)"></circle>
  </svg>
</template>

<script lang="ts" setup>
</script>
<style lang="scss">
</style>